import React from "react"
import {connect} from 'react-redux'

class ProductList extends React.Component{
   constructor(props){
       super(props)
       console.log(props)
       this.idRef=React.createRef()
       this.nameRef=React.createRef()
       this.priceRef=React.createRef()
   }
   addproduct(){
      let product={
          id:this.idRef.current.value,
          name:this.nameRef.current.value,
          price:this.priceRef.current.value
      }
      this.props.addproduct(product)
   }
   render(){
       let list=this.props.products.map((item)=>{
        //    console.log(111,item)
           return (<li>
               ID:{item.get("id")} name:{item.get("name")} price:{item.get("price")}
               <button onClick={e=>this.props.PinkProduct(item)}>加入购物车</button>
           </li>)
       })
       return(
           <div>
               id:<input type="text" ref={this.idRef}/>
               name:<input type="text" ref={this.nameRef}/>
               price:<input type="text" ref={this.priceRef}/>
               <button onClick={this.addproduct.bind(this)}>新增产品</button>
               <hr/>
               产品列表
               <ul>
                   {list}
               </ul>
           </div>
       )
   }
}

function mapStateToProps(state){
    return {
        products:state.get("products")
    }
 }
 function mapDispatchToProps(dispatch){
    return{
        PinkProduct(product){
            dispatch({type:"PinkProduct",product:product})
        },
        addproduct(product){
            dispatch({type:"addproduct",product:product})
        }
    }
 }
//  function postAddProduct(product){
//      return new Promise
//  }
export default connect(mapStateToProps,mapDispatchToProps)(ProductList);
